<template>
  <div>
    <form @submit.prevent="generateTable">
      <div>
        <label for="rows">行数 (n):</label>
        <input v-model.number="rows" type="number" id="rows" required>
      </div>
      <div>
        <label for="columns">列数 (m):</label>
        <input v-model.number="columns" type="number" id="columns" required>
      </div>
      <div>
        <label for="borderWidth">边界宽度:</label>
        <input v-model.number="borderWidth" type="number" id="borderWidth" required>
      </div>
      <div>
        <label>显示行间隔色:</label>
        <input type="radio" id="showRowColorTrue" value="true" v-model="showRowColor">
        <label for="showRowColorTrue">是</label>
        <input type="radio" id="showRowColorFalse" value="false" v-model="showRowColor">
        <label for="showRowColorFalse">否</label>
      </div>
      <div>
        <label>显示列间隔色:</label>
        <input type="radio" id="showColumnColorTrue" value="true" v-model="showColumnColor">
        <label for="showColumnColorTrue">是</label>
        <input type="radio" id="showColumnColorFalse" value="false" v-model="showColumnColor">
        <label for="showColumnColorFalse">否</label>
      </div>
      <div>
        <label for="mergeStartRow">从第 a 行 b 列开始合并:</label>
        <input v-model.number="mergeStartRow" type="number" id="mergeStartRow" required>
        <input v-model.number="mergeStartCol" type="number" id="mergeStartCol" required>
      </div>
      <div>
        <label for="mergeEndRow">合并至 c 行 d 列:</label>
        <input v-model.number="mergeEndRow" type="number" id="mergeEndRow" required>
        <input v-model.number="mergeEndCol" type="number" id="mergeEndCol" required>
      </div>
      <button type="submit">生成表格</button>
    </form>
    <table v-if="tableData" :style="{borderWidth: borderWidth + 'px', borderStyle: 'solid'}">
      <tbody>
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex" :class="getRowClass(rowIndex)">
        <td v-for="(cell, colIndex) in row" :key="colIndex" :rowspan="cell.rowspan" :colspan="cell.colspan" :class="getCellClass(rowIndex, colIndex)">
          {{ cell.content }}
        </td>
        <td v-once v-if="rowIndex == 0">
          {{rowIndex}}-{{tableData.length}}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: 0,
      columns: 0,
      borderWidth: 1,
      showRowColor: 'false',
      showColumnColor: 'false',
      mergeStartRow: 0,
      mergeStartCol: 0,
      mergeEndRow: 0,
      mergeEndCol: 0,
      tableData: null
    };
  },
  methods: {
    generateTable() {
      this.tableData = [];

      for (let i = 0; i < this.rows; i++) {
        let row = [];
        for (let j = 0; j < this.columns; j++) {
          if (
              i >= this.mergeStartRow &&
              i <= this.mergeEndRow &&
              j >= this.mergeStartCol &&
              j <= this.mergeEndCol
          ) {
            continue;
          } else {
            row.push({
              content: `${i}-${j}`,
            });
          }
        }
        this.tableData.push(row);
      }

      if (
          this.mergeStartRow <= this.mergeEndRow &&
          this.mergeStartCol <= this.mergeEndCol &&
          this.mergeStartRow < this.rows &&
          this.mergeStartCol < this.columns
      ) {
        const mergedCell = {
          content: `${this.mergeStartRow}-${this.mergeStartCol}`,
          rowspan: this.mergeEndRow - this.mergeStartRow + 1,
          colspan: this.mergeEndCol - this.mergeStartCol + 1
        };

        this.tableData[this.mergeStartRow][this.mergeStartCol] = mergedCell;
      }
    },
    getRowClass(index) {
      if (this.showRowColor === 'true') {
        return index % 2 === 0 ? 'even-row' : 'odd-row';
      }
      return '';
    },
    getCellClass(rowIndex, colIndex) {
      const classes = [];
      if (this.showRowColor === 'true') {
        classes.push(rowIndex % 2 === 0 ? 'even-row' : 'odd-row');
      }
      if (this.showColumnColor === 'true') {
        classes.push(colIndex % 2 === 0 ? 'even-col' : 'odd-col');
      }
      return classes.join(' ');
    },
  }
};
</script>

<style scoped>
table {
  border-collapse: separate;
  width: 100%;
}

tr.even-row td,
td.even-row {
  background-color: #f0f0f0;
}

tr.odd-row td,
td.odd-row {
  background-color: #ffffcc;
}

td.even-col {
  background-color: #f0f0f0;
}

td.odd-col {
  background-color: #ffffcc;
}

td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}
</style>